import React from 'react';
import { StickyContainer } from 'react-sticky';
import { connect } from 'umi';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      scriptStatus: 'no',
    };
  }

  componentDidMount() {
    let date = new Date();
    let time = date.getTime();
    let jsArr = [
      'https://www.iqihang.com/zt/common/js/jquery-2.0.0.min.js',
      'https://www.iqihang.com/zt/common/js/vue.min.js',
      'https://www.iqihang.com/zt/common/js/wow.min.js',
      'https://www.iqihang.com/zt/common/js/common.js?v=10.1',
      'https://www.iqihang.com/public-js/loginComponent/loginComponent.js',
      'https://chatn9.bjmantis.net/chat/js/dist/mantis.min.js?6301#5ef994f44b419a1d842e4929',
      `http://192.168.0.105:9002/js/result.js?t=${time}`,
    ];

    for (let jsUrl of jsArr) {
      let script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = jsUrl;
      document.getElementsByTagName('body')[0].appendChild(script);
    }
    const { htmlText, jsText, cssText } = this.props;
    this.addCssText(cssText);
  }

  componentWillReceiveProps(nextProps: Readonly<{}>, nextContext: any) {
    console.log('nextProps', nextProps);
    const { htmlText, jsText, cssText } = nextProps;
    if (cssText !== this.props.cssText) {
      this.addCssText(cssText);
    }
  }

  addCssText = (code) => {
    let style = document.createElement('style');
    style.type = 'text/css';
    style.rel = 'stylesheet';
    //for Chrome Firefox Opera Safari
    style.appendChild(document.createTextNode(code));
    //for IE
    //style.styleSheet.cssText = code;
    let head = document.getElementsByTagName('head')[0];
    head.appendChild(style);
  };

  //  跳转对应子应用
  onClickApp = (param) => {
    console.log('param', param);
  };

  handleScriptCreate() {
    this.setState({ scriptLoaded: false });
  }

  handleScriptError() {
    this.setState({ scriptError: true });
  }

  handleScriptLoad() {
    this.setState({ scriptLoaded: true, scriptStatus: 'yes' });
  }

  render() {
    // todo 添加登录操作
    const { value } = this.state;
    let date = new Date();
    let time = date.getTime();
    let cssArr = [
      `https://www.iqihang.com/zt/common/css/common.css?t=${time}`,
      `https://www.iqihang.com/zt/22quan/css/animate.min.css?t=${time}`,
      `https://www.iqihang.com/zt/22quan/css/swiper.min.css?t=${time}`,
      // `https://www.iqihang.com/zt/bnjx/css/style.css?t=${time}`,
    ];

    let jsArr = [
      'https://www.iqihang.com/zt/common/js/jquery-2.0.0.min.js',
      'https://www.iqihang.com/zt/common/js/vue.min.js',
      'https://www.iqihang.com/zt/common/js/wow.min.js',
      'https://www.iqihang.com/zt/common/js/common.js?v=10.1',
      'https://www.iqihang.com/public-js/loginComponent/loginComponent.js',
      'https://chatn9.bjmantis.net/chat/js/dist/mantis.min.js?6301#5ef994f44b419a1d842e4929',
      `http://192.168.0.105:9002/js/result.js?t=${time}`,
    ];

    const { htmlText, jsText, cssText } = this.props;

    return (
      <StickyContainer>
        {cssArr &&
          cssArr.map((item) => {
            return <link key={item} rel="stylesheet" href={item} />;
          })}
        <div
          dangerouslySetInnerHTML={{
            __html: htmlText,
          }}
        />

        {/*{jsArr && jsArr.map(item => {*/}
        {/*  return <Script*/}
        {/*    url={item}*/}
        {/*    key={item}*/}
        {/*    onCreate={this.handleScriptCreate.bind(this)}*/}
        {/*    onError={this.handleScriptError.bind(this)}*/}
        {/*    onLoad={this.handleScriptLoad.bind(this)}*/}
        {/*  />*/}
        {/*})}*/}
      </StickyContainer>
    );
  }
}

export default connect(({ indexModel }) => ({
  indexModel,
}))(App);
